<template>
  <div>

    <!-- 组件1 搜索 -->
    <MySearch @parentsearch="parentsearch"/>
    <!-- 组件2 表格 -->
    <MyBiao  :myArr="arr" @resetTable="initHome"/>
    <!-- 组件3 分页 -->
    <MyPage @changePageSize="parentPageSize" @changePage="parentPage" :page="page" :pageSize="pageSize" :total="total"/>
  </div>
</template>
<script>
// 引入文件
// 分页
import MyPage from './component/MyPage.vue'
// 表格
import MyBiao from './component/MyBiao.vue'
// 搜索
import MySearch from './component/MySearch.vue'
import {getHomeApi} from  '../../api/homeApi'
export default {
  // 注册组件
  components:{
          MyPage,
          MySearch,
          MyBiao,
  },
  data(){
    return{
      arr:[],
      keyword:'',
      page:1,
      pageSize:20,
      total:0
    }
  },
  mounted(){
    // 发送我们的请求,数组是共享数据,我们要把他写在父组件中
    // 这是一个方法
    this.initHome()

  },
  methods:{
    parentPageSize(val){//切换PageSize事件
    this.pageSize = val
    this.initHome()
    },
    parentPage(val){//切换页码事件
    this.page=val
    this.initHome()
    },
    parentsearch(val){//子组件触发父组件,传参
    this.keyword = val //把传过来的值给keywore
    this.initHome()
    },
    // 首屏查询接口
    initHome(){
      var params = {keyword:this.keyword,
         page:this.page,
         pageSize:this.pageSize}
      getHomeApi(params).then(res=>{
        console.log(res);
        if(res.code==200){
          this.arr=res.data
          this.total= res.total
        }
      })
    }
  }
  
  
}
</script>

<style lang="less">
  .number{
    border: 1px solid gray;
  }
 

</style>